<template>
  <div id="right">
    <div class="template-attr-title">
      {{ $t('属性') }}
    </div>
    <el-form :inline="true" :model="data" :rules="editorFormRules" ref="editorFormRef" label-width="44px" size="small" :show-message="false" :hide-required-asterisk="true" :status-icon="false">
        <div class="template-attr-name">
            {{ data.name }}
        </div>
        <div class="template-attr-body">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="X" label-width="44px" prop="X">
                        <el-input v-model="data.X" autocomplete="off" min="0" maxlength="4" clearable style="width:80px" @blur="changeAttr('xposition', data.X)"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="Y" label-width="30px" prop="Y">
                        <el-input v-model="data.Y" autocomplete="off" min="0" maxlength="4" clearable style="width:80px" @blur="changeAttr('yposition', data.Y)"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="W" label-width="44px">
                        <el-input v-model="data.W" autocomplete="off" clearable style="width:80px" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="H" label-width="30px">
                        <el-input v-model="data.H" autocomplete="off" clearable style="width:80px" disabled></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="音频输出优先级" label-width="120px"></el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item>
                        <el-select v-model="data.svl" placeholder="请选择优先级" style="width:243px" @change="handleChange">
                            <el-option v-for="(item, index) in svls" :key="item.value" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </div>
        <div class="template-attr-name">
            {{ $t('终端输出属性') }}
        </div>
        <div class="template-attr-body">
            <el-form-item :label="$t('宽')" label-width="44px" prop="width">
                <el-input v-model="data.width" autocomplete="off" min="1" maxlength="4" :show-word-limit="false" clearable style="width:200px" @blur="changeAttr('wid', data.width)"></el-input>
            </el-form-item>
            <el-form-item :label="$t('高')" label-width="44px" prop="height">
                <el-input v-model="data.height" autocomplete="off" min="1" maxlength="4" :show-word-limit="false" clearable style="width:200px" @blur="changeAttr('hei', data.height)"></el-input>
            </el-form-item>
        </div>
    </el-form>
  </div>
</template>

<script>
import { svlArray } from "@/const/index"
export default {
    data(){
        return {
            editorFormRules: {
                X: { pattern: /^[0-9]+$/, message: '只能输入数字' },
                Y: { pattern: /^[0-9]+$/, message: '只能输入数字' },
                width: { pattern: /^[0-9]+$/, message: '只能输入数字' },
                height: { pattern: /^[0-9]+$/, message: '只能输入数字' }
            },
            svls: svlArray
        }
    },
    props:{
        data:{
            type:Object,
            default: () => {}
        }
    },
    methods: {
        changeAttr(type, val) {
            this.$refs.editorFormRef.validate(async valid => {
                this.$eventBus.$emit('changeAttr', type, val)
            })
        },
        handleChange(val) {
            this.$eventBus.$emit('changeAttr', 'svl', val)
        }
    }
}
</script>